<template>
	<!-- 半连续工艺 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="flex m-between">
							<view class="content-item-title"><text class="title-txt">一车间半连续工艺</text></view>
							<view class="flex">
								<view v-for="(item,i) in [{color:'#17D246',name:'运行'},{color:'#FF0051',name:'停止'}]"
									:key="i" class="flex s-center m-r-10">
									<view class="m-r-4"
										:style="{width: '20rpx',height: '20rpx',borderRadius: '50%',backgroundColor:item.color}" />
									<text class="f-s-12 fw">{{item.name}}</text>
								</view>
							</view>
						</view>
					</template>

					<view style="background: #091f41ab" class="b-r-8">
						<view class="flex m-end s-center p-t-10 p-x-10">
							<up-icon labelSize="12" size="14" label="运行参数详情" name="arrow-rightward" labelPos="left"
								color="#bbc6ce" labelColor="#bbc6ce" @tap="gateTo('一车间参数详情')" />
						</view>
						<view style="position: relative">
							<image :src="getImgUrl('one.png')" mode="widthFix" style="width: 100%" />
							<view v-for="(item,i) in list1" :key="item.key"
								:style="{'background-color': colorFn(list1Data[item.key]), ...item.style}"
								class="imgItem" />
						</view>
					</view>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="flex m-between">
							<view class="content-item-title"><text class="title-txt">二车间半连续工艺</text></view>
							<view class="flex">
								<view v-for="(item,i) in [{color:'#17D246',name:'运行'},{color:'#FF0051',name:'停止'}]"
									:key="i" class="flex s-center m-r-10">
									<view class="m-r-4"
										:style="{width: '20rpx',height: '20rpx',borderRadius: '50%',backgroundColor:item.color}" />
									<text class="f-s-12 fw">{{item.name}}</text>
								</view>
							</view>
						</view>
					</template>
					<view style="background: #091f41ab" class="b-r-8">
						<view class="flex m-end s-center p-t-10 p-x-10">
							<up-icon labelSize="12" size="14" label="运行参数详情" name="arrow-rightward" labelPos="left"
								color="#bbc6ce" labelColor="#bbc6ce" @tap="gateTo('二车间参数详情')" />
						</view>
						<view style="position: relative">
							<image :src="getImgUrl('two.png')" mode="widthFix" style="width: 100%" />
							<view v-for="(item,i) in list2" :key="item.key"
								:style="{'background-color': colorFn(list2Data[item.key]), ...item.style}"
								class="imgItem" />
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
		getByApiCode
	} from '@/api/customApi';

	const showMoreKeys = ref([1, 2, 3]),
		collapse = ref(null);

	function gateTo(data) {
		uni.navigateTo({
			url: '/pages/application/ksgc/blxgy/detail?data=' + data
		});
	}

	function colorFn(type) {
		let data = '';
		switch (type) {
			case '运行':
				data = '#17D246';
				break;
			case '停止':
				data = '#FF0051';
				break;
			case '2':
			case 2:
				data = '#434040';
				break;
			default:
				data = 'rgba(0,0,0,0)';
				break;
		}
		return data
	}

	const list1 = [{
			key: '101一级破碎站',
			style: {
				left: '38%',
				top: '36rpx'
			}
		}, {
			key: '701皮带机',
			style: {
				left: '38%',
				top: '92rpx'
			}
		}, {
			key: '103除铁器',
			style: {
				left: '38%',
				top: '148rpx'
			}
		}, {
			key: '104皮带机',
			style: {
				left: '38%',
				top: '202rpx'
			}
		}, {
			key: '105滚轴筛',
			style: {
				left: '38%',
				top: '258rpx'
			}
		}, {
			key: '108破碎机',
			style: {
				left: '38%',
				top: '312rpx'
			}
		}, {
			key: '107滚轴筛',
			style: {
				left: '38%',
				top: '368rpx'
			}
		}, {
			key: '109破碎机',
			style: {
				left: '38%',
				top: '422rpx'
			}
		}, {
			key: '111皮带机',
			style: {
				left: '38%',
				top: '478rpx'
			}
		}, {
			key: '301除铁器',
			style: {
				left: '38%',
				top: '534rpx'
			}
		}, {
			key: '201皮带机',
			style: {
				left: '38%',
				top: '588rpx'
			}
		}, {
			key: '302刮板机',
			style: {
				left: '38%',
				top: '644rpx'
			}
		}, {
			key: '303分级筛',
			style: {
				left: '14%',
				top: '700rpx'
			}
		}, {
			key: '304分级筛',
			style: {
				left: '66%',
				top: '700rpx'
			}
		}, {
			key: '305干选机',
			style: {
				left: '14%',
				top: '754rpx'
			}
		}, {
			key: '306干选机',
			style: {
				left: '66%',
				top: '754rpx'
			}
		}, {
			key: '309破碎机',
			style: {
				left: '14%',
				top: '810rpx'
			}
		}, {
			key: '801皮带机',
			style: {
				left: '59%',
				top: '810rpx'
			}
		}, {
			key: '310破碎机',
			style: {
				left: '66%',
				top: '810rpx'
			}
		}, {
			key: '311皮带机',
			style: {
				left: '2.5%',
				top: '934rpx'
			}
		}, {
			key: '313皮带机',
			style: {
				left: '26%',
				top: '934rpx'
			}
		}, {
			key: '314皮带机',
			style: {
				left: '50.5%',
				top: '934rpx'
			}
		}, {
			key: '312皮带机',
			style: {
				left: '76.5%',
				top: '934rpx'
			}
		}, {
			key: '704刮板机',
			style: {
				left: '12%',
				top: '998rpx'
			}
		}, {
			key: '702皮带机',
			style: {
				left: '64%',
				top: '998rpx'
			}
		}, {
			key: '704刮板机',
			style: {
				left: '12%',
				top: '1080rpx'
			}
		}, {
			key: '702皮带机',
			style: {
				left: '64%',
				top: '1080rpx'
			}
		}],
		list1Data = ref({});

	function fn1() {
		getApiFabric({
			apiCode: "dd8e12fb-b0a4-43eb-ac0b-e6ff4a29e193",
			propertyMapping: {
				key: "deviceName",
				val: "ZT_YX"
			}
		}).then(res => {
			list1Data.value = ArrayToObj(res.data, )
		})
	}
	const list2 = [{
			key: 'A101刮板A电机',
			style: {
				left: '40%',
				top: '118rpx'
			}
		}, {
			key: '102破碎机A-正转',
			style: {
				left: '40%',
				top: '260rpx'
			}
		}, {
			key: 'A201皮带机',
			style: {
				left: '40%',
				top: '402rpx'
			}
		}, {
			key: 'A204滚轴筛A',
			style: {
				left: '40%',
				top: '544rpx'
			}
		}, {
			key: 'A205二次破碎机A-正转',
			style: {
				left: '40%',
				top: '686rpx'
			}
		}, {
			key: 'A701皮带机',
			style: {
				left: '40%',
				top: '828rpx'
			}
		}, {
			key: 'A101收料皮带',
			style: {
				left: '74%',
				top: '260rpx'
			}
		}],
		list2Data = ref({});

	function fn2() {
		getApiFabric({
			apiCode: "9f6b4648-c465-4ea5-8fc7-37023dbc008a",
			propertyMapping: {
				key: "deviceName",
				val: "ZT_YX"
			}
		}).then(res => {
			list2Data.value = ArrayToObj(res.data)
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn2()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh();
				});
			}
			setTimeout(() => {
				collapse.value.init();
			}, 400);
		});
	}

	onShow(() => {
		getServerData();
	});

	onPullDownRefresh(() => {
		getServerData(true);
	});
</script>

<style lang="scss" scoped>
	.imgItem {
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}
</style>